<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title>商品编辑-商品列表</title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <link rel="stylesheet" href="/css/cp.css"/>
    <style>
        .sp-tree {
            display: none;
            position: absolute;
            z-index: 199999999;
            width: 300px;
            padding: 10px;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #d3d3d3;
        }

        .sp-tree li {
            position: relative;
            font-size: 12px;
            line-height: 20px;
            padding-left: 20px
        }

        .sp-tree li li {
            border-left: 1px solid #ccc;
        }

        .sp-tree li h3 {
            font-weight: normal;
            cursor: pointer;
        }

        .sp-tree li h3 b {
        }

        .sp-tree li h3 b:hover {
            text-decoration: underline;
        }

        .sp-tree li i {
            position: absolute;
            left: 0;
            top: 0;
            font-size: 16px;
            font-weight: bold;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .sp-tree li ul {
            display: none;
        }
    </style>
    <!-- start cp-wrapper -->
    <div class="cp-wrapper">

        <form id="uploadForm">
            <div class="cp-hash" id="jbxx"><h3>基本信息</h3></div>
            <div class="cp-details">
                <div class="cp-input">
                    <span>商品标题：</span><input type="text" name="title" th:value="${goods.name}"
                                             placeholder="最多允许输入5-15个汉字">
                    <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}"/>
                </div>
                <div class="cp-input">
                    <span>商品编码：</span><input type="text" name="good_number" th:value="${goods.number}"  readonly>
                </div>
                <div class="cp-input">
                    <span>采购价：</span><input type="text" name="costPrice" placeholder="采购价" th:value="${goods.costPrice}">
                </div>
                <div class="cp-input">
                    <span>直播价：</span><input type="text" name="salePrice" placeholder="建议直播价" th:value="${goods.salePrice}">
                </div>
                <div class="cp-input" id="categoryDIV">
                    <span>商品分类：</span>
                    <input type="text" id="sp-sort" name="category" th:value="${goods.categoryName}" placeholder="请选择分类" autocomplete="off" readonly>
                    <input type="hidden" name="categoryId" id="categoryId" th:value="${goods.categoryId}"/>
                </div>
                <div class="cp-input" style="width: 1000px">
                    <span>服装属性：</span>
                    <select name="attr1" id="attr1" >
                        <option value="" selected disabled>季节</option>
                        <option value="不分季节">不分季节</option>
                        <option value="春秋季">春秋季</option>
                        <option value="夏季">夏季</option>
                        <option value="冬季">冬季</option>
                    </select>

                    <select name="attr2" id="attr2">
                        <option value="" selected disabled>品类</option>
                        <option value="外套">外套</option>
                        <option value="衬衫">衬衫</option>
                        <option value="针织衫">针织衫</option>
                        <option value="T恤">T恤</option>
                        <option value="卫衣/绒衫">卫衣/绒衫</option>
                        <option value="裤子">裤子</option>
                        <option value="裙子">裙子</option>
                        <option value="内衣">内衣</option>
                        <option value="泳装">泳装</option>
                        <option value="套装">套装</option>
                    </select>
                    <select name="attr3" id="attr3">
                        <option value="" selected disabled>风格</option>
                        <option value="瑞丽">瑞丽</option>
                        <option value="嘻皮">嘻皮</option>
                        <option value="百搭">百搭</option>
                        <option value="淑女">淑女</option>
                        <option value="韩版">韩版</option>
                        <option value="民族">民族</option>
                        <option value="欧美">欧美</option>
                        <option value="学院">学院</option>
                        <option value="通勤">通勤</option>
                        <option value="中性">中性</option>
                        <option value="嘻哈">嘻哈</option>
                        <option value="田园">田园</option>
                        <option value="朋克">朋克</option>
                        <option value="OL">OL</option>
                        <option value="洛丽塔">洛丽塔</option>
                        <option value="街头">街头</option>
                        <option value="简约">简约</option>
                        <option value="波西米亚">波西米亚</option>
                        <option value="森林系">森林系</option>
                    </select>
                    <select name="attr4" id="attr4" style="width: 120px">
                        <option value="" selected disabled>年份</option>
                        <option value="2021">2021</option>
                        <option value="2022">2022</option>
                        <option value="2020">2020</option>
                        <option value="2019">2019</option>
                    </select>
                </div>
                <div class="cp-input" style="width: 1000px">
                    <span>面料成份：</span>
                    <input type="text" name="attr5" id="mianliao" placeholder="面料" th:value="${goods.attr5}">
                </div>
                <div class="cp-input" style="width: 1200px">
                    <span>尺寸重量：</span>
                    <input type="number" name="length" id="yichang" placeholder="身长/裙长(cm)" style="width:110px" th:value="${goods.length}">
                    <input type="number" name="height" id="xiuchang" placeholder="袖长(cm)" style="width:75px" th:value="${goods.height}">
                    <input type="number" name="width1" id="jiankuo" placeholder="肩阔(cm)" style="width:75px" th:value="${goods.width1}">
                    <input type="number" name="width" id="xiongkuo" placeholder="胸阔(cm)" style="width:75px" th:value="${goods.width}">
                    <input type="number" name="width2" id="yaokuo" placeholder="腰阔(cm)" style="width:75px" th:value="${goods.width2}">
                    <input type="number" name="width3" id="tunkuo" placeholder="臀阔(cm)" style="width:75px" th:value="${goods.width3}">
                    <input type="number" name="weight" id="zhongliang" placeholder="重量(g)" style="width:75px" th:value="${goods.weight}">

                </div>


                <div class="cp-input">
                    <span>备&nbsp;&nbsp;&nbsp;&nbsp;注:</span>
                    <input type="text" name="remark" id="beizhu" placeholder="建议80-110斤" th:value="${goods.remark}">
                </div>
<!--                <div class="cp-input" id="categoryDIV">
                    <span>商品分类：</span><input type="text" id="sp-sort" name="category" placeholder="请选择分类"
                                              autocomplete="off">
                    <input type="hidden" name="categoryId" id="categoryId" th:value="${goods.categoryId}"/>
                </div>
                <div class="cp-input">
                    <span>计量单位：</span>

                    <select name="spunit" id="sp-unit">
                        <option selected disabled>请选择</option>
                        <option th:each="UnitEntiy:${unitList}" th:value="${UnitEntiy.getId()}"
                                th:text="${UnitEntiy.getName()}"></option>
                    </select>
                </div>-->
<!--                <div class="cp-input">
                    <span>默认仓库：</span>
                    <select name="locationId" id="locationId" >
                        <option value="0">请选择仓库</option>
                        <option th:each="it:${houses}" th:value="${it.getId()}" th:text="${it.getName()}"></option>
                    </select>-->
<!--                    <select id="reservoir" name="reservoirId" onchange="addReservoir(this)">-->
<!--                        <option selected disabled>库区</option>-->
<!--                    </select>-->
<!--                    <select id="shelf" name="shelfId">-->
<!--                        <option selected disabled>货架</option>-->
<!--                    </select>-->
 <!--               </div>-->
            </div>

         <!--   <div class="cp-hash" id="xsxx"><h3>商品规格设置</h3></div>
            &lt;!&ndash; 销售信息 规格 start &ndash;&gt;
            <div class="cp-product">
                <div class="sp-box">
                    <h3>颜色</h3>
                    <ul class="sp-guige" id="sp-color">
                        <li th:each="item:${colors}">
                            <input type="hidden" name="spec_color_id[]" th:value="${item.getVid()}"/>
                            <input type="text" name="spec_color[]" autocomplete="off" th:value="${item.getV()}"/>

                            <i>×</i>
                            <div></div>
                        </li>
                    </ul>
                    <div class="sp-guige-select">
                        <span id="color-select">添加颜色规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>尺码</h3>
                    <ul class="sp-guige" id="sp-size">
                        <li th:each="item:${sizes}">
                            <input type="hidden" name="spec_size_id[]" th:value="${item.getVid()}"/>
                            <input type="text" name="spec_size[]" th:value="${item.getV()}" autocomplete="off">
                            <i>×</i>
                            <div></div>
                        </li>
                    </ul>
                    <div class="sp-guige-select">
                        <span id="size-select">添加尺码规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>款式</h3>
                    <ul class="sp-guige" id="sp-style">
                        <li th:each="item:${styles}">
                            <input type="hidden" name="spec_style_id[]" th:value="${item.getVid()}"/>
                            <input type="text" name="spec_style[]" th:value="${item.getV()}" autocomplete="off">
                            <i>×</i>
                            <div></div>
                        </li>
                    </ul>
                    <div class="sp-guige-select">
                        <span id="style-select">添加款式规格值</span>
                    </div>
                </div>
                <div class="sp-box">
                    <h3>规格</h3>
                    <table class="sp-standard">
                        <thead id="sp-thead"></thead>
                        <tbody id="sp-tbody"></tbody>
                    </table>

                </div>
            </div>-->
            <!-- 销售信息 规格 end -->


            <!--            <div class="cp-hash" id="qtxx"><h3>其他设置</h3></div>-->
            <!--            <div class="cp-other">-->
            <!--                <input type="hidden" name="freightTemplate" value="0">-->
            <!--                <div class="cp-input">-->
            <!--                    <span>库存预警：</span><input type="specNumber" name="lowQty"  style="width: 100px;" placeholder="最小库存">- -->
            <!--                    <input type="specNumber" name="highQty"  style="width: 100px;" placeholder="最大库存">-->
            <!--                </div>-->
            <!--            </div>-->


            <div class="cp-button">
                <button type="button" id="submit_btn">保存</button>
            </div>
        </form>


        <!--<script type="text/javascript" src="/js/guige_edit.js"></script>-->

    </div>
    <!-- end cp-wrapper -->
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
                var laydate = layui.laydate;
                $ = layui.jquery;
                var form = layui.form;
                layer = layui.layer;
            $(function () {
                var attr1 = '[[${goods.attr1}]]';
                $("#attr1").val(attr1);
                var attr2 = '[[${goods.attr2}]]';$("#attr2").val(attr2);
                var attr3 = '[[${goods.attr3}]]';$("#attr3").val(attr3);
                var attr4 = '[[${goods.attr4}]]';$("#attr4").val(attr4);
                form.render(); //更新全部
                form.render('select'); //刷新select选择框渲染
            })
            })
    </script>
    <script>
        $(function () {
            var $sort = null;
            var $tree = null;
            var $status = false;
            var $data = null;
            var $cateId = 0;

            function create(data) {
                if (!data || data.length < 1) return;
                for (var i = 0, n = data.length, tpl = ''; i < n; i++) {
                    if (data[i].child && data[i].child.length > 0) {
                        tpl += '<li><h3><i>+</i><span style="background:#918597" data-id=' + data[i].id + '>' + data[i].name + '</span></h3><ul style="display: block;">' + create(data[i].child) + '</ul></li>';
                    } else {
                        tpl += '<li><h3><b data-id=' + data[i].id + '>' + data[i].name + '</b></h3></li>';
                    }
                }
                return tpl;
            }


            //商品分类初始化
            function init() {
                $tree = $('<ul class="sp-tree"></ul>').appendTo($('#categoryDIV'));

                $(document).click(function (e) {
                    if ($status) {
                        $tree.hide();
                        $status = false;
                    }
                });
                $tree.delegate('i', 'click', function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var _h = _this.parent('h3');
                    var _box = _h.next('ul');
                    if (_box.css('display') === 'none') {
                        _box.show();
                        _this.html('-');
                    } else {
                        _box.hide();
                        _this.html('+');
                    }
                });
                $tree.delegate('b', 'click', function (e) {
                    e.stopPropagation();
                    $sort.val($(this).text());
                    $("#categoryId").val($(this).attr('data-id'));
                    $tree.hide();
                    $status = false;
                    $cateId = $(this).attr('data-id');
                    console.log($(this).attr('data-id') + " + " + $cateId);
                });
                $tree.click(function (e) {
                    e.stopPropagation();
                });
            }

            function render() {
                $tree.html(create($data));
                $sort = $('#sp-sort');
                $sort.click(function (e) {
                    e.stopPropagation();
                    var _this = $(this);
                    var pos = _this.offset();
                    var x = pos.left - 280;
                    var y = pos.top + _this.outerHeight() - 60;
                    $tree.css({
                        left: x,
                        top: y
                    }).show();
                    $status = true;
                });
            }

            // ajax 获得分类数据 完成后执行 init()
            $.ajax({
                url: '/ajax_goods/json_category',
                type: "POST",
                dataType: 'json',
                contentType: 'application/json',
                success: function (res) {
                    // $data = res.msg;
                    // $data.replace(/&quot;/g,'\"');
                    $data = eval('(' + res.msg + ')');
                    console.log($data);

                    init();
                    render();
                }
            });
        })
    </script>
    <script>
        // function addHouse() {
        //     var id = $("#locationId").val();
        //     $.ajax({
        //         type: "POST",
        //         url: "/ajax_stock_in/get_reservoir_by_locationId",
        //         data: id,
        //         dataType: 'json',
        //         contentType: 'application/json',
        //         success: function (data) {
        //             var str = "<option value = '0'>请选择库区</option>";
        //             var data1 = data.data;
        //             for (var i = 0; i < data1.length; i++) {
        //                 str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
        //             }
        //             $("#reservoir").html(str);
        //             $("#shelf").contents().remove();
        //         }
        //     });
        // }
        //
        // function addReservoir() {
        //     var id = $("#reservoir").val();
        //     $.ajax({
        //         type: "POST",
        //         url: "/ajax_stock_in/get_shelf_by_reservoirId",
        //         data: id,
        //         dataType: 'json',
        //         contentType: 'application/json',
        //         success: function (data) {
        //             var str = "<option value = '0'>请选择货架</option>";
        //             var data1 = data.data;
        //             for (var i = 0; i < data1.length; i++) {
        //                 str = str + "<option value = '" + data1[i].id + "'>" + data1[i].name + "</optiom>";
        //             }
        //             $("#shelf").html(str);
        //         }
        //     });
        // }

        $(function () {
            $("#submit_btn").click(function () {
                // 参数判断
/*                var title = $("input[name='title']").val()
                if (title == '') {
                    alert("请填写商品名称");
                    $("input[name='title']").focus();
                    return false;
                }
                var categoryId = $("#categoryId").val();
                var category = $("input[name='category']").val();
                if (categoryId == 0) {
                    alert("请选择分类");
                    $("input[name='category']").focus();
                    return false;
                }
                var unit = $("#sp-unit").val();
                if (unit == null || unit == '') {
                    alert("请选择计量单位");
                    $("#sp-unit").focus();
                    return false;
                }
                var locationId = $("#locationId").val();
                if (locationId == null || locationId == '') {
                    alert("请选择仓库");
                    $("#locationId").focus();
                    return false;
                }*/
                // var reservoir = $("#reservoir").val();
                // if (reservoir == null || reservoir == '') {
                //     alert("请选择库区");
                //     $("#reservoir").focus();
                //     return false;
                // }
                // var shelf = $("#shelf").val();
                // if (shelf == null || shelf == '') {
                //     alert("请选择货架");
                //     $("#shelf").focus();
                //     return false;
                // }
                //检查商品规格


                //检查颜色，颜色标签是必选

/*                if ($("input[name^='spec_code']") == null || $("input[name^='spec_code']").size() == 0) {
                    alert("请设置商品规格");
                    return false;
                }*/

/*                var returnResult = true;
                //规格编码
                $("input[name^='spec_code']").each(function (i, el) {
                    var specNumber = $(this).val();
                    if (specNumber == "") {
                        alert("请填写规格编码");
                        $(this).focus();
                        returnResult = false;
                        return false;
                    }
                });


                if (returnResult == false) return false;*/

                var fd = new FormData($('#uploadForm')[0]);
                $.ajax({
                    url: "/ajax_goods/goods_edit2",
                    type: "POST",
                    dataType: "JSON",
                    data: $('#uploadForm').serialize(),
                    success: function (res) {
                        if (res.code == 0) {
                            window.location.href = "/goods/list?page=[[${page}]]";
                        } else {
                            alert(res.msg);
                        }
                        // alert(JSON.stringify(res));
                        return false;
                    }
                });

                return false;
            })
        })
    </script>
</div>
</body>
</html>
